<template>
	<div class="">
		<ChoiseHeader :choiseList="choiseList" @chageData='chageSaleRankings'></ChoiseHeader>
		<scroll-view scroll-y  class="rankings" @scrolltolower="lower" >
			<div class='rankings-list'>
	            <div class='rankings-item' v-for="(item,idx) in salesRankList" :key="idx">
	                <div class='rankings-img'>
	                    <image mode='widthFix' v-if="item.saleType == 1" :src='item.coffeeAbsoluteurl'></image>
	                    <image mode='widthFix' v-if="item.saleType == 2" :src='item.goodAbsoluteurl'></image>
	                </div>
	                <div class='rankings-desc'>
	                    
	                    <div v-if="item.saleType == 1" >{{pageText.spmc}}：{{item.coffeeName}}</div>
	                    <div v-if="item.saleType == 2" >{{pageText.spmc}}：{{item.goodName}}</div>
	                    <div>{{pageText.ddl}}：<text>{{item.orderCount}}</text></div>
	                    <div>{{pageText.xse}}：<text>{{item.orderPay}}</text></div>
	                </div>
	            </div>

	            <div class="loading" v-if="LoadIng">正在加载……</div>
	       		<div class="noData" v-if="!more">没有更多了</div>
				<div class="noData" v-if="noData">没有记录</div>
	        </div>
	     </scroll-view>
	</div>
</template>
<script type="text/javascript">
	import ChoiseHeader from '@/components/ChoiseHeader'
	export default{
		data(){
			return {
				Agents:[], //代理商下面的加盟商、合作商、承包商数据列表 
				dates:[],
				types:[],
				coffeeMakers:[], //咖啡机筛选列表

				pageText:{
					'spmc':'商品名称',
		            'ddl':'订单量',
		            'xse':'销售额' 
				}
			}
		},
			
		props:['AgentList','dateList','typeList','coffeeMaker','salesRankList','more','LoadIng','noData'],
		components:{
			ChoiseHeader
		},
		computed:{
			choiseList(){
				let list = []
				list = [ this.Agents,this.types,this.dates,this.coffeeMakers]
				return  list
			}
		},
		methods:{
			lower(){
				this.$emit('getNextPage')
			},
			chageSaleRankings( item,idx){

			 	this.$emit('chageSaleRankings', item,idx)
			},

		},
		
		watch:{
			AgentList(newDatas){ this.Agents = newDatas},
			dateList(newDatas){ this.dates = newDatas},
			typeList(newDatas){ this.types = newDatas},
			coffeeMaker(newDatas){ this.coffeeMakers = newDatas},
			RankingsList(newDatas){ this.RankingsList = newDatas}

		}
	}
</script>

<style>
.rankings,.statistics{
    position: fixed;
    top: 90rpx;
    left: 0;
    right: 0;
    bottom: 0rpx;
}
.rankings-list{
    padding-top: 40rpx;
    padding-bottom: 80rpx;
}
.rankings-item{
    display: flex;
    padding: 20rpx;
    background: #fff;
    margin: 0 20rpx 30rpx 20rpx;
}
.rankings-img image{
    width: 140rpx;
    height: 140rpx;
    border-radius:10rpx;
}
.rankings-desc{
    padding-left: 20rpx;
    font-size: 26rpx;
    line-height: 40rpx;
}
.rankings-desc view{
    margin-bottom: 10rpx;
}
.rankings-desc view text{
    color: red;
}

</style>